<template>
  <header>
    <div class="container">
      <div class="left-header">
        <div class="logo"></div>
        <h3>欢迎登录</h3>
      </div>
      <RouterLink class="right-header" to="/">
        <span>进入网站首页</span>
        <i class="iconfont icon-angle-right"></i>
        <i class="iconfont icon-angle-right"></i>
      </RouterLink>
    </div>
  </header>
</template>

<script>
export default {
  name: 'LoginHeader'
}
</script>

<style lang="less" scoped>
header {
  width: 100%;
  background-color: #fff;
  .container {
    display: flex;
    justify-content: space-between;
    .left-header {
      display: flex;
      align-items: center;
      .logo {
        width: 200px;
        height: 132px;
        background: url(../../../assets/images/images/logo.png) no-repeat center 18px / contain;
        cursor: pointer;
      }
      h3 {
        margin-top: 20px;
        margin-left: 20px;
        color: #666;
        font-size: 24px;
        font-weight: 400;
      }
    }
    .right-header {
      display: flex;
      align-items: center;
      span {
        margin-top: 28px;
        font-size: 16px;
        margin-right: 5px;
      }
      i {
        margin-top: 28px;
        letter-spacing: -5px; // 减少字符间的空白
        font-size: 14px;
        color: #27ba9b;
      }
    }
  }
}
</style>
